@import url('./base.less');
// vw 视口宽度 等于二倍图的宽度的百分之一
@vw: 3.75vw;
@color: #fb7299;

html,
body{
    width: 100%;
    height: 100%;
}

// 头部
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: (84.18/@vw);
    background-color: #fff;
    z-index: 1;
    .navbar{
        padding: 0 (12/@vw) 0 (18/@vw);
        height: (44/@vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
            a{
                display: block;
                width: (61.39/@vw);
                height: (44.09/@vw);
                line-height: (44.09/@vw);
                .iconfont{
                    font-size: (28/@vw);
                    color:@color;
                }
            }
        }
        .right{
            width: (160/@vw);
            height: (44/@vw);
            display: flex;
            justify-content: space-between;
            // align-items: center;
            .search{
                margin: (10/@vw) (22/@vw) 0 0;
                width: (22/@vw);
                height: (22/@vw);
                .iconfont{
                    font-size: (22/@vw);
                    color: #ccc;
                }
            }
            .face{
                vertical-align: top;
                margin: (10/@vw) (12/@vw) 0 0;
                width: (24/@vw);
                height: (24/@vw);
                img{
                    width: (24/@vw);
                    height: (24/@vw);
                    
                }
            }
            .launch-app{
                width: (80/@vw);
                height: (44/@vw);
                img{
                    margin: (10/@vw) 0 0 (8/@vw);
                    width: (72/@vw);
                    height: (24/@vw);
                }
            }
        }
        
    }
    .channel-menu{
        height: (40/@vw);
        // background-color: green;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        ul{
            display: flex;
            li{
                a{
                    display: block;
                    padding: 0 (16/@vw); 
                    height: (40/@vw);
                    text-align: center;
                    line-height: (40/@vw);
                    span{
                        display: block;
                        height: (40/@vw);
                        font-size: (14/@vw);
                        &.current {
                            color: @color;
                            border-bottom: 2px solid @color;
                        }
                        &:hover{
                            border-bottom: 2px solid @color;
                            color: @color;
                        }
                    }  
                }
            }    
        }
        .more{
            width: (40/@vw);
            height: (22.6/@vw);
            i{
                .iconfont{
                    font-size: (22/@vw);
                }
            }
            
        }
    }
}

// 视频列表
.video-list-box{
    padding: (84.18/@vw) (5/@vw) 0;
    .video-list{
        display: flex;
        flex-wrap: wrap;
        // 隐藏原来的内容 但隐藏的元素仍占有原来的空间
        // visibility: hidden;
        // 隐藏原来的元素 且隐藏的元素也不会占用空间
        // display: none;
        a{
            padding: (8/@vw) (5/@vw);
            width: 50%;
            height: (150/@vw);
            font-size: (12/@vw);
            .pic{
                position: relative;
                img{
                    width: (173/@vw);
                    height: (97/@vw);
                }
                .count{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    padding: (5/@vw) (6/@vw);
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    color: #fff;
                    font-size: (12/@vw);
                }
            }
            
            .text{
                margin-top: (5/@vw);
                height: (30/@vw);
                overflow: hidden;
                // 	显示省略符号 ... 来代表被修剪的文本。
                // 设置了 -webkit-line-clamp 并且有display: -webkit-box; -webkit-box-orient: vertical; 也会有...
                text-overflow: ellipsis; //可省略
                
                // 块容器 中的内容限制为指定的行数.
                // 必须有下面两个设置 才能生效
                // 在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).
                -webkit-line-clamp: 2; //指定两行
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }  
}